import React, { useEffect, useState } from 'react'
import { IndexBar, List, NavBar, Toast } from 'antd-mobile'
import request from "../../utils/request";

import "./City.css";

const City = (props) => {
    const [cityList, setCityList] = useState([]);
    useEffect(() => {
        getter();
    }, [])
    const getter = async () => {
        let arr = [];
        let City = JSON.parse(localStorage.getItem("city"));
        arr.push({
            title: "当前城市",
            index: "#",
            children: [{
                label: City,
            }
            ]
        });
        const res = await request({
            url: '/area/city',
            method: "get",
            params: {
                level: 1,
            }
        });
        const hotcity = await request({
            url: '/area/hot',
            method: "get",
        })
        if (hotcity.data.status === 200) {
            arr.push({
                title: "热门城市",
                index: "热",
                children: [...hotcity.data.body]
            })
        }
        if (res.data.status === 200) {
            let str = [];
            res.data.body.forEach(item => {
                str.push(item.pinyin.slice(0, 1));
            })

            let newstr = Array.from(str);
            newstr.sort((a, b) => { return a.localeCompare(b) });
            let newarr = newstr.filter((item, index, self) => {
                return self.indexOf(item) === index
            })
            let citylist = [];
            citylist.push(...newarr.map((item) => {
                return {
                    title: item,
                    index: item,
                }
            }))
            citylist.forEach(item => {
                let children = [];
                res.data.body.forEach(items => {
                    if (item.title === items.pinyin.slice(0, 1)) {
                        children.push(items);
                    }
                })
                item["children"] = children;
            })
            arr.push(...citylist)
        }
        setCityList(arr);
    }

    //切换城市
    const Change = async (newcity) => {
        const res = await request({
            url: "/area/info",
            method: "get",
            params: {
                name: newcity.label,
            }
        })
        if (res.data.body.label !== newcity.label) {
            Toast.show({
                content: '该城市暂无房源数据'
            })
        } else {
            localStorage.setItem('city', JSON.stringify(newcity.label));
            localStorage.setItem('cityId', JSON.stringify(newcity.value));
            back();
        }
    }
    
    const {history}=props

    //返回
    const back = () => {
        history.push('/home')
    }
    return (
        <div className="City">
            <NavBar onBack={back} className="citytitle" style={{ backgroundColor: "#ccc" }}>城市选择</NavBar>
            <div className="citymain">
                <div className="county" style={{ height: window.innerHeight }}>
                    <IndexBar>
                        {cityList.map(item => {
                            const { index, title, children } = item;
                            return (<IndexBar.Panel
                                index={index}
                                title={title}
                                key={title}
                            >
                                <List>
                                    {
                                        children.map((items, ind) => {
                                            return <List.Item key={ind} onClick={() => Change(items)}>{items.label}</List.Item>
                                        })
                                    }

                                </List>
                            </IndexBar.Panel>)
                        })}
                    </IndexBar>
                </div>
            </div>
        </div>
    )
}

export default City
